---
title: Getting started
path: /getting-started/
---

<Box paddingY="major-1" />

# Getting started

Firstly, install Bumbag:

```
npm install bumbag
```

Once you have installed the `bumbag` module, wrap your application in a "`<BumbagProvider>`":

```jsx
import { Provider as BumbagProvider } from 'bumbag';

const App = () => (
  <BumbagProvider>
    Hello world!
  </BumbagProvider>
);
```

Now, you can start using the Bumbag components:

```jsx
import { Button, Provider as BumbagProvider } from 'bumbag';

const MyApp = () => (
  <BumbagProvider>
    <Button>
      Hello world!
    </Button>
  </BumbagProvider>
);
```

> Note: You can override Bumbag's default theme by passing a `theme` prop to `<BumbagProvider>`. [Click here to find out how to add a theme](/theming).

## Usage with Gatsby

In order to use Bumbag with [Gatsby](https://gatsbyjs.org/), you will firstly need to install the Gatsby plugin for Bumbag.

```
npm install gatsby-plugin-bumbag
```

Then, we will add this plugin to your app's `gatsby-config.js`:

```js
module.exports = {
  plugins: ['gatsby-plugin-bumbag']
}
```

After that, we will add the `<BumbagProvider>` to our `gatsby-browser.js` file:

```jsx
import React from 'react';
import { Provider as BumbagProvider } from 'bumbag';

export const wrapRootElement = ({ element, ...props }) => (
  <BumbagProvider>
    {element}
  </BumbagProvider>
);
```

We will also have to add a few lines to our `gatsby-ssr.js` file:

```jsx
export { wrapRootElement } from './gatsby-browser';
```

Now, you can freely use Bumbag in your Gatsby app!

## Usage with Next.js

In order to use Bumbag with [Next.js](https://nextjs.org/), you will firstly have to set your Next.js app for SSR with Bumbag.

Firstly, you will need to install `bumbag-server`:

```
npm install bumbag-server
```

Open up your `_document.js` file, and add the following:

```jsx
import Document, { Head, Html, Main, NextScript } from 'next/document'
import { extractCritical } from 'bumbag-server'
import { InitializeColorMode } from 'bumbag'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    const styles = extractCritical(initialProps.html)
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style
            data-emotion-css={styles.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

Then, open up your `_app.js` file, and add the `<BumbagProvider>`:

**Make sure you add `isSSR` as a prop to `BumbagProvider`. This will help with color mode consistency.**


```jsx
import NextApp from 'next/app';
import { Provider as BumbagProvider } from 'bumbag';

export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <BumbagProvider isSSR>
        <Component {...pageProps} />
      </BumbagProvider>
    );
  }
}
```

Now you can freely use Bumbag in your Next.js app!
